<template>
  <div style="width: 100%;height: 100%;" v-loading="tableLoading" id="interviewerRecord">
    <dy-table ref="table" :height="605" v-if="showTable" is-all loop :page-size="5" :rows="tableData" method="POST" :cols="tableCols" update/>
    <el-dialog :close-on-click-modal="false" append-to-body title="验证操作码" :visible.sync="showOperationCode" >
      <el-form ref="form" label-width="100px" :model="model" :rules="rules">
        <el-form-item label="操作码" prop="operationCode">
          <el-input clearable maxlength="5" v-model="model.operationCode" placeholder="请输入操作码"></el-input>
        </el-form-item>
      </el-form>
      <div style="width: 100%;text-align: right;margin-top: 20px">
        <el-button icon="el-icon-close" @click="showOperationCode = false">取消</el-button>
        <el-button icon="el-icon-plus" type="primary" @click="deleteRecord">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import DyTable from '../common/DyTable'
import GetImage from '../../mixins/GetImage'
export default {
  components: { DyTable },
  name: 'InterviewerRecord',
  props: {
    visitorTypes: Array,
    rooms: Array
  },
  mixins: [GetImage],
  data () {
    return {
      tableData: [], // 表格数据
      tableCols: [],
      tableLoading: true,
      showTable: false,
      model: {
        operationCode: ''
      },
      showOperationCode: false,
      rules: {
        operationCode: [
          { required: true, message: '请输入操作码', trigger: 'blur' },
          { min: 5, max: 5, message: '操作码为5位数字', pattern: /^\d{5}$/, trigger: 'change' }
        ]
      },
      recordUnderDelete: null
    }
  },
  methods: {
    /**
     * 获取数据并初始化表格
     */
    getDatas () {
      let visitors
      let prisoners
      const ids = []
      const prisonerInIds = []
      this.showTable = false
      this.$http.POST('Interviewer:listInterviewerRecord', {}).then(res => {
        this.tableData = res.data.data
        this.total = res.data.total
        this.tableData.forEach(d => {
          ids.push(d.visitorId)
          d.records.forEach(r => {
            prisonerInIds.push(r.prisonInNo)
          })
        })
        return this.$http.REQUEST({
          path: 'Interviewer:GetVisitorsByIds',
          method: 'POST',
          params: { ids: ids.join(',') }
        })
      }).then(res => {
        visitors = res.data.data
        return this.$http.REQUEST({
          path: 'Interviewer:GetPrisonersByIds',
          method: 'POST',
          params: { ids: prisonerInIds.join(',') }
        })
      }).then(res => {
        prisoners = res.data.data
        this.$nextTick(() => {
          this.$set(this, 'tableCols', [{
            label: '',
            type: 'expand',
            template: v => {
              let temp = ''
              v.records.forEach(r => {
                const prisoner = prisoners.find(p => p.staffPrisoninNo === r.prisonInNo)
                temp += `
                <div class="prisoner-line">
                  <div class="prisoner-line-image">
                    <img width="100" src="${this.getPrisonerImg(prisoner.id)}" onerror="${this.getDefaultImg(6)}"/>
                  </div>
                  <div class="info-text">
                    <div class="info-line">
                      <div class="info-label">对象姓名：</div>
                      <div class="info-value">${prisoner.name}</div>
                    </div>
                    <div class="info-line">
                      <div class="info-label">对象番号：</div>
                      <div class="info-value">${prisoner.staffPrisoninNo}</div>
                    </div>
                    <div class="info-line">
                      <div class="info-label">所在监室：</div>
                      <div class="info-value">${prisoner.prisonRoomNo}</div>
                    </div>
                    <div class="info-line">
                      <div class="info-label">入所性质：</div>
                      <div class="info-value">${prisoner.detentioninNatures}</div>
                    </div>
                  </div>
                </div>
              `
              })
              return `<div style="width: 100%;display: flex;flex-wrap: wrap">${temp}</div>`
            }
          }, {
            label: 'id',
            prop: 'id',
            hidden: true
          }, {
            label: '访客照片',
            template: v => {
              const visitor = visitors.find(vi => vi.id === v.visitorId)
              return `<img width="80px" height="80px" src="${this.getVisitorImg(visitor.picpath)}" onerror="${this.getDefaultImg(visitor.typeId)}"/>`
            }
          }, {
            label: '访客姓名',
            template: v => {
              return `<div style="background-color: teal;border-radius: 4px;width: 80px;line-height: 30px;text-align: center;color: #eee">${visitors.find(vi => vi.id === v.visitorId).name}</div>`
            }
          }, {
            label: '访客类型',
            template: v => {
              const type = this.visitorTypes.find(t => t.id === visitors.find(vi => vi.id === v.visitorId).typeId)
              const color = {
                3: '#67c23a',
                4: '#409eff',
                5: 'royalblue'
              }
              return `<div style="background-color: ${color[type.id]};border-radius: 4px;width: 80px;line-height: 30px;text-align: center;color: #eee">${type.name}</div>`
            }
          }, {
            label: '采访类型',
            template: v => {
              const type = v.type ? '会见' : '提审'
              const color = v.type ? '#67c23a' : '#409eff'
              return `<div style="background-color: ${color};border-radius: 4px;width: 60px;line-height: 30px;text-align: center;color: #eee">${type}</div>`
            }
          }, {
            label: '房间号',
            template: v => {
              const colors = {
                1: ['deepskyblue', '#2196f3', 'dodgerblue'],
                2: ['#32cd77', '#32cda9', '#32cdbf'],
                3: ['#41ade1', '#4181e1', 'royalblue'],
                4: ['dodgerblue', '#32abcd', '#32cdbf'],
                5: ['#41cbe2', '#41a8e1', 'royalblue']
              }
              const room = this.rooms.find(r => r.ardId === v.roomId)
              let color = null
              if (room) {
                color = `linear-gradient(141deg, ${colors[room.type][0]} 0%,${colors[room.type][1]}  51%, ${colors[room.type][2]} 75%)`
              }
              if (color) {
                return `<div style="background-image: ${color};border-radius: 4px;width: 60px;line-height: 30px;text-align: center;color: #eee;font-weight: bold;font-size: 18px;">${room.number}</div>`
              } else {
                return '<div style="background-color: dimgrey;border-radius: 4px;width: 60px;line-height: 30px;text-align: center;color: #eee;font-size: 16px;">无</div>'
              }
            }
          }, {
            label: '操作',
            operations: [{
              label: '删除',
              type: 'danger',
              icon: 'el-icon-close',
              handler: this.confirmDeleteRecord
            }]
          }])
        })
        this.tableLoading = false
        this.showTable = true
      })
    },

    /**
     * 提醒是否删除提审会见记录
     */
    confirmDeleteRecord (record) {
      this.$confirm('确认删除该条记录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.showOperationCode = true
        this.recordUnderDelete = record
      })
    },

    /**
     * 删除提审会见记录
     */
    deleteRecord () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.tableLoading = true
          this.$http.POST('Interviewer:selfHelpDelInterviewerRecord', {
            id: this.recordUnderDelete.id,
            operationCode: this.model.operationCode
          }).then(res => {
            this.tableLoading = false
            if (res.data.code === 200) {
              this.showOperationCode = false
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.model.operationCode = ''
              this.$parent.$parent.getRooms()
              this.getDatas()
            } else {
              this.$message.error(res.data.msg)
            }
          })
        }
      })
    }
  },
  created () {
    this.getDatas()
    this.$ws.CreateEvent('arraign', e => {
      const msg = JSON.parse(e.data)
      if (msg.msgType === this.MESSAGE_TYPE.INTERVIEWER_UPDATE) {
        this.getDatas()
      }
    })
    this.$ws.CreateEvent('selfHelp', e => {
      const msg = JSON.parse(e.data)
      if (msg.msgType === this.MESSAGE_TYPE.INTERVIEWER_UPDATE) {
        this.getDatas()
      }
    })
  }
}
</script>
<style>
  #interviewerRecord .prisoner-line{
    width: 260px;
    margin-left: 20px;
    margin-top: 20px;
    border: 1px solid teal;
    border-radius: 5px;
    box-shadow: 5px 5px 5px teal;
    height: 100px;
    overflow: hidden;
    display: flex;
  }
  #interviewerRecord .prisoner-line-image{
    height: 100px;
    width: 100px;
  }
  #interviewerRecord .prisoner-line:nth-last-child(1){
    margin-bottom: 20px;
  }
  #interviewerRecord .info-line{
    display: flex;
    font-size: 18px;
    color: #333;
    margin-top: 5px;
    border-bottom: 1px solid #eee;
  }
  #interviewerRecord .prisoner-line .info-line{
    font-size: 14px;
    margin-top: 4px;
  }
  #interviewerRecord .info-line > .info-label{
    width: 100px;
    text-indent: 10px;
  }
  #interviewerRecord .prisoner-line .info-label{
    width: 80px;
  }
</style>
